<template>

	<van-action-sheet :show="show" :title="title" @close="fwclose">
		<view class="fwbox" v-if="title == '服务'">
			<view class="item" v-for="item in serviceList" :key="item.id">
				<view class="title">{{ item.name }}</view>
				<view class="note">{{ item.description }}</view>
			</view>
		</view>

		<view class="csbox" v-if="title == '商品参数'">
			<view class="item" v-for="ites in itemSpu" :key="ites.id">
				<view class="title">{{ ites.name }}</view>
				<view class="note">{{ ites.item }}</view>
			</view>
		</view>
		<view class="know">
			<van-button round size="large" color="#FF6200" @click="fwclose">我知道了</van-button>
		</view>
	</van-action-sheet>

</template>

<script>
import vanActionSheet from "@/wxcomponents/vant/action-sheet/index"
import vanButton from "@/wxcomponents/vant/button/index"
export default {
	components: {
		vanActionSheet,
		vanButton
	},
	props: {
		title: {
			type: String,
			default: ''
		},
		show: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: {}
		},
		itemSpu: {
			type: Array,
			default: () => []
		},
		serviceList: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		fwclose() {
			this.$emit('fwclose', false)
		}
	}
}
</script>

<style lang="scss">
.fwbox {
	margin-top: 50rpx;
	min-height: 800rpx;

	.item {
		display: flex;
		flex-direction: column;
		row-gap: 20rpx;
		border-bottom: 1px solid #F0F0F0;
		padding: 30rpx;

		.title {
			font-size: 30rpx;
			color: #333333;
		}

		.note {
			font-size: 30rpx;
			color: #A2A2A2;
		}
	}

	.item:last-of-type {
		border-bottom: none;
	}
}

.csbox {
	margin: 50rpx;
	min-height: 800rpx;
	display: flex;
	flex-direction: column;
	row-gap: 40rpx;

	.item {
		display: flex;
		column-gap: 120rpx;

		.note {
			font-size: 30rpx;
			color: #333333;
		}

		.title {
			font-size: 30rpx;
			color: #A2A2A2;
		}
	}
}
</style>